<template>
  <div class="app-container">

    <u-page title="广告管理">
      <div slot="header">
        <el-button type="primary" icon="el-icon-edit" @click="hdlOpen(newForm)">
          {{ textMap['create'] }}
        </el-button>
      </div>

      <u-filtered>
        <el-form ref="listQuery" :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="类型" prop="type">
            <el-select v-model="listQuery.type" placeholder="广告类型" clearable>
              <el-option label="全部" value="" />
              <el-option label="广告位" value="ad" />
              <el-option label="轮播图" value="swiper" />
              <el-option label="商品" value="goods" />
              <el-option label="优惠券" value="coupon" />
            </el-select>
          </el-form-item>
          <el-form-item label="标题" prop="title">
            <el-input v-model="listQuery.title" placeholder="关键词查询" clearable />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <u-status v-model="listQuery.status" />
          </el-form-item>
          <el-form-item label="创建时间">
            <u-date-time-picker v-model="searchDate" @change="changeSearchDate" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="hdlFilter">搜索</el-button>
          </el-form-item>
          <el-dropdown>
            <el-button type="primary">
              批量操作<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :disabled="selectData.length===0" @click.native="hdlDel">批量删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form>
      </u-filtered>

      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" @click="hdlDelete(row.id, row.title)">删除</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>

    </u-page>

    <u-dialog :title="textMap[dialogStatus]" :show.sync="dialogFormVisible" @confirm="dialogStatus==='create'?handleCreate():handleUpdate()">
      <el-form ref="dialogForm" :rules="rules" :model="dataForm" label-width="60px">

        <el-form-item v-if="dialogStatus === 'create'" prop="type" label="类型">
          <el-radio-group v-model="dataForm.type">
            <el-radio-button label="ad">广告位</el-radio-button>
            <el-radio-button label="swiper">轮播图</el-radio-button>
            <el-radio-button label="goods">商品</el-radio-button>
            <el-radio-button label="coupon">优惠券</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item prop="title" label="标题">
          <el-input v-model="dataForm.title" placeholder="标题" clearable maxlength="30" show-word-limit />
        </el-form-item>

        <el-form-item label="时间" prop="validityDate">
          <u-date-time-picker v-model="dataForm.validityDate" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" />
        </el-form-item>

        <el-form-item v-if="'goods' === dataForm.type" prop="price" label="价格">
          <el-input
            v-model="dataForm.price"
            placeholder="请输入商品价格"
            oninput="value=value.replace(/^\D*(\d{0,9}(?:\.\d{0,2})?).*$/g,'$1')"
            clearable
            @change="priceChange"
          />
        </el-form-item>

        <el-form-item prop="thumb" label="图片">
          <u-upload v-model="dataForm.thumb" name="file" tips="建议尺寸:640 * 350, 640 * 640, 请将所有图片尺寸保持一致" />
        </el-form-item>

        <el-form-item prop="url" label="链接">
          <el-input v-model="dataForm.url" placeholder="小程序链接" clearable />
        </el-form-item>

        <el-form-item prop="location" label="排序">
          <el-input v-model="dataForm.location" placeholder="数字越大，排名越靠前" clearable />
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="dataForm.status">
            <el-radio :label="true">启用</el-radio>
            <el-radio :label="false">禁用</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
    </u-dialog>

  </div>
</template>
<script>
export default {
  data() {
    return {
      api: this.$u.api.PluginsPaymarket,
      // 表格
      columns: [
        {
          prop: 'type',
          label: '类型',
          render: (h, params) => {
            const { type } = params.row
            const title = type === 'goods' ? '商品' : type === 'swiper' ? '轮播图' : type === 'coupon' ? '优惠券' : '广告位'
            return h('el-tag', { props: { type: 'success' }}, title)
          }
        },
        {
          prop: 'title',
          label: '标题'
        },
        // {
        //   prop: 'beginTime',
        //   label: '开始时间'
        // },
        // {
        //   prop: 'endTime',
        //   label: '结束时间'
        // },

        {
          prop: 'validityDate',
          label: '有效期日期',
          width: '180',
          render: (h, params) => {
            let { beginTime, endTime } = params.row
            if (!beginTime) {
              beginTime = '不限制'
            }
            if (!endTime) {
              endTime = '不限制'
            }
            return [
              h('el-tag', { props: { effect: 'plain' }}, '起始:' + beginTime),
              h('br'),
              h('el-tag', { props: { effect: 'plain' }}, '终止:' + endTime)
            ]
          }
        },
        {
          prop: 'thumb',
          label: '图片',
          image: true
        },
        {
          prop: 'price',
          label: '价格/元',
          render: (h, params) => {
            const { price } = params.row
            if (price > 0) {
              return h('el-tag', { props: { type: 'success' }}, price)
            }
          }
        },
        {
          prop: 'url',
          label: '链接'
        },
        {
          prop: 'pv',
          label: '访问量'
        },
        // {
        //   prop: 'location',
        //   label: '排序',
        //   width: '70'
        // },
        {
          prop: 'status',
          label: '状态',
          render: (h, params) => {
            if (params.row.status) {
              return h('el-tag', { props: { type: 'success' }}, '已启用')
            } else {
              return h('el-tag', { props: { type: 'danger' }}, '禁用')
            }
          }
        },
        {
          prop: 'createdAt',
          label: '创建时间',
          timestamp: true
        }
      ],

      list: [],
      listLoading: true,
      listOptions: {
        index: true, // 序号
        mutiSelect: true, // boolean 是否多选
        stripe: true // boolean 斑马纹
      },
      listQuery: {
        pageNumber: 1,
        pageSize: 10,
        totalCount: 1,
        title: '',
        status: '',
        type: ''
      },

      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑广告',
        create: '新增广告'
      },
      dataForm: {},
      rules: {
        validityDate: [
          { required: true, message: '时间必选', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择类型', trigger: ['blur'] }
        ],
        title: [
          { required: true, message: '请输入标题', trigger: ['blur'] }
        ],
        price: [
          { required: true, message: '请输入商品价格', trigger: ['blur'] }
        ],
        thumb: [
          { required: true, message: '请上传图片', trigger: ['blur'] }
        ]
      },
      // 删除选中数据
      selectData: [],
      newForm: {
        status: true,
        type: 'ad'
      }
    }
  },
  created() {
    this.hdlList()
  },
  methods: {
    // 打开修改弹窗
    handleEdit(row) {
      const { beginTime, endTime } = row
      row.validityDate = []
      if (beginTime && endTime) {
        row.validityDate = [beginTime, endTime]
      }
      this.hdlEdit(row)
    },
    // 新增事件
    handleCreate() {
      const { validityDate } = this.dataForm
      if (validityDate) {
        this.dataForm.beginTime = validityDate[0]
        this.dataForm.endTime = validityDate[1]
      }
      this.hdlCreate()
    },
    // 更新操作
    handleUpdate() {
      const { validityDate } = this.dataForm
      if (validityDate) {
        this.dataForm.beginTime = validityDate[0]
        this.dataForm.endTime = validityDate[1]
      }
      this.hdlUpdate()
    },
    priceChange(e) {
      this.dataForm.price = Number(e)
    }
  }
}
</script>
